import React, { useEffect, useState } from "react";

const pageName = "widget";
const klassName = pageName.replace(/\./g, '-');

export default function WidgetComp({title, thumb, handler, index, active}) {

  return (
    <div className={`cp-${klassName} ${active ? `active` : ``}`}>
      <div className="inner">

        <div className="content" onClick={e => handler.select(index)}>
          <div className="tag">能量块 {index + 1}</div>

          <div className="thumb" style={{backgroundImage: `url(${thumb})`}} />

          <div className="title">
            <div className="txt">{title}</div>
          </div>

          <img className="underlay" src="/2023/3w-kv-city-game-230330/img/widget-bg.png" alt="" />
        </div>

        <div className="footer">
          <div className="btn" onClick={e => handler.setup(index)}>
            {
              active ? `已安装` : `确认安装`
            }
          </div>
        </div>
      </div>
    </div>
  )
}